import React from 'react'
/**
 * Created by 林洪东 on 2020/6/13.
 */
export class Toggle extends React.Component {
    constructor(props) {
        super(props)
        this.state = { isToggleOn: true }
        // 为了在回调中使用 `this`，这个绑定是必不可少的
        // this.handleClick = this.handleClick.bind(this);
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(e) {
        console.log('handleClick ===>>>', e)
        this.setState(state => ({
            isToggleOn: !state.isToggleOn,
        }))
    }

    handleClick2(e, m) {
        e.preventDefault()
        console.log('handleClick2 ===>>>', m)
        this.setState(state => ({
            isToggleOn: !state.isToggleOn,
        }))
    }

    handleClick3 = (e, m) => {
        e.preventDefault()
        console.log('handleClick3 ===>>>', m)
        this.setState(state => ({
            isToggleOn: !state.isToggleOn,
        }))
    }

    handleClick5(m) {
        return e => {
            e.preventDefault()
            console.log('handleClick5 ===>>>', m)
            this.setState(state => ({
                isToggleOn: !state.isToggleOn,
            }))
        }
    }

    render() {
        return (
            <div style={{ display: 'flex' }}>
                <button onClick={this.handleClick.bind(this)}>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                </button>
                <button
                    onClick={e => {
                        this.handleClick2(e, { msg: '哈哈哈' })
                    }}
                >
                    {this.state.isToggleOn ? 'ON2' : 'OFF2'}
                </button>
                <button onClick={this.handleClick3}>
                    {this.state.isToggleOn ? 'ON3' : 'OFF3'}
                </button>
                <button onClick={this.handleClick5({ msg: '哈哈哈' })}>
                    {this.state.isToggleOn ? 'ON5' : 'OFF5'}
                </button>
            </div>
        )
    }
}
